<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :rules="rules" :model="filters" :label-width="90" inline>
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option placeholder="请选择小区"
                                       @change="housechange" no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="部门">
                        <div class="filters-input">
                            <treeselect :options="filtersCompany" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                        noResultsText="没有发现结果" :default-expand-level="100" :value="value"
                                        placeholder="选择部门"
                                        style="width: 100%" :show-count="true" v-model="filters.companyId"/>
                        </div>
                    </FormItem>
                    <Button type="primary" icon="ios-search" size="large" @click="loadData()">
                        搜索
                    </Button>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" size="large"
                        @click="handleUpdate('新增')">
                    新增
                </Button>
            </Row>

            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="housingName" label="小区"></el-table-column>
                <el-table-column prop="name" label="路线"></el-table-column>
                <el-table-column prop="companyName" label="巡更部门"></el-table-column>
                <el-table-column prop="description" label="说明"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <el-button type="primary">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" align="center">
                                <el-dropdown-item @click.native="routeCode(scope.row.id)">下载路线二维码</el-dropdown-item>
                                <el-dropdown-item @click.native="routeInfo(scope.row.id)">编辑路线</el-dropdown-item>
                                <el-dropdown-item @click.native="handleUpdate('修改',scope.row)">修改</el-dropdown-item>
                                <!--<el-dropdown-item @click.native="handleDelete(scope.row.id)">删除</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="modalTitle"
               width="900">
            <Form :model="modal" :rules="rules" ref="form2" label-position="right" :label-width="110"
                  class="myOpenFrom">
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="modal.housingId" filterable default-first-option placeholder="请选择小区"
                               @change="housechange" :disabled="modalTitle=='修改'?true:false" style="width:100%" no-data-text="暂无数据">
                        <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="巡更部门" prop="companyId">
                    <treeselect :options="optionsCompany" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                noResultsText="没有发现结果" :default-expand-level="100" :value="value" placeholder="选择部门"
                                style="width: 100%" :show-count="true" v-model="modal.companyId"/>
                </FormItem>
                <FormItem label="巡更路线" prop="name">
                    <Input v-model="modal.name" placeholder="巡更路线"/>
                </FormItem>
                <FormItem label="巡更说明" prop="patrolOrder">
                    <Input v-model="modal.description" placeholder="巡更说明" size="large" required="true"/>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </Row>
</template>
<script>
    import baseURL from '_conf/url';
    import Treeselect from "@riophae/vue-treeselect";

    export default {
        components: {
            Treeselect
        },
        data() {
            return {
                //校验规则
                rules: {
                    housingId: [
                        {
                            required: true,
                            message: "小区不能为空",
                        }
                    ],
                    companyId: [
                        {
                            required: true,
                            message: "巡更部门不能为空",
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: "巡更路线不能为空",
                        }
                    ],
                },
                houseList: [],
                routeList: [],
                optionsCompany: [],
                filtersCompany:[],
                modalTitle: "",
                value: null,
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                formVisible: false,
                modal: {},
                filters: {
                    housingId: "",
                },
                //表单提交状态
                formLoading: false,
                tableData: [],
            };
        },

        created: function () {
            this.loadData();
            this.gethouse();
        },
        methods: {
            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                });
            },
            //查询、新增修改。选择小区加载部门
            housechange(housingId) {
                this.postRequest("/api/manageHR/getCompanyByHousingId?housingId=" + housingId).then(res => {
                    if (res.code == 20000) {
                        this.optionsCompany = res.data;
                        this.filtersCompany = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                })
            },
            //加载数据
            loadData() {
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/patrol/routeLoadData", params).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //生成路线二维码
            routeCode(id) {
                location.href = baseURL + '/api/patrol/download/routeCodeDownload?routeId=' + id
            },
            //路线详情
            routeInfo(routeId) {
                this.$router.push({path: 'address', query: {routeId: routeId}})
            },
            //打开页面
            handleUpdate(str, row) {
                this.optionsCompany = [];
                this.formVisible = true;
                this.modalTitle = str;
                this.modal = {};
                if (str == "修改") {
                    this.housechange(row.housingId);
                    this.modal = row;
                }
            },
            //保存
            handleSubmit() {
                this.$refs["form2"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.postRequest("/api/patrol/saveOrUpdateRoute", this.modal).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.$refs["form2"].resetFields();
                                this.loadData();
                                this.$Message.success("保存成功！");
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //取消
            onCancel() {
                this.formLoading = false;
                this.formVisible = false;
            },
            //删除
            handleDelete: function (id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/patrol/deleteRoute?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                });
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
